<template>
  <div>count: {{ count }}</div>
  <button @click="setCount">按钮</button>

  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
  </ul>
  <button @click="person.age = 18">新增</button>
</template>

<script lang="ts">
interface IData {
  count: number;
  person: {
    name: string;
    age?: number;
  };
}

export default {
  name: "App",
  /*
    Vue2 中，data有种写法：对象和函数。其中组件中只能用函数
    Vue3 中，data只有函数写法

    Vue2中，data定义的数据是响应式数据，如果给数据新增属性，不是响应式的，要想是响应式this.$set()
      Object.defineProperty
    Vue3中，data定义的数据都是响应式数据（即使给数据新增属性，也是响应式的）, Vue3 删除 $set() $delete()
      Proxy
  */
  data(): IData {
    return {
      count: 0,
      person: {
        name: "jack",
      },
    };
  },
  methods: {
    setCount() {
      this.count++;
    },
  },
};
</script>

<style></style>
